<template>
	<view class="content">
		 <view id="mui-video"></view>
		 <view style="position: absolute;z-index: 9999999;background-color: red;width: 100px;height: 100px;">111</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				heartTime: 0,
				heartInterval: null,
				isConnect: false,
				title: 'IOT',
				config: {
					ip: "192.168.1.21",
					port: 12345,
				},
				videoUrl: "../../static/flv/xgplayer-demo-720p.flv",
				webViewUrl: 'http://192.168.1.21:8080/app_web?t=' + new Date().getTime(), // WebView 加载的网页地址
				// webViewUrl: 'http://120.25.124.106/app_web?t=' + new Date().getTime(), // WebView 加载的网页地址
			}
		},
		onLoad() {
			this.connectToServer(this.config);
			plus.screen.lockOrientation( 'landscape-primary');
		},
		mounted() {
			  this.init();
		},
		methods: {
			// 连接服务器
			connectToServer(data) {
				var _this = this;
				if (_this.isConnect) {
					return;
				}
				try {
					const MoeTcpClient = uni.requireNativePlugin("moe-tcp-client");
					MoeTcpClient.connect({
						ip: data.ip,
						port: data.port
					}, result => {
						var json = JSON.parse(result);
						console.log(json);
						if (json.code == 1) {
							_this.heartTime = new Date().getTime();
							_this.isConnect = true;
						} else {
							_this.isConnect = false;
							setTimeout(() => {
								_this.isConnect = false;
								_this.connectToServer(_this.config);
								console.log("connectToServer 重连")
							}, 3000);
						}
						_this.heartInterval = setInterval(() => {
							MoeTcpClient.sendStr({
								message: 'heart'
							});
						}, 5000)
						// 连接结果 
						// {"code":1,"msg":"连接成功","data":""}
						// {"code":0,"msg":"连接失败","data":""}
					})

					MoeTcpClient.isConnected(res => {
						// true or false
						console.log("isConnected", res);
					});

					MoeTcpClient.onReceive(res => {
						var json = JSON.parse(res);
						if (json.code == 1) {
							var data = json.data;
							if (data === "heart") {
								_this.sendMessageToWebView(res)
								_this.heartTime = new Date().getTime();
							}
						}
						console.log("onReceive", json);
					});

					MoeTcpClient.onDisconnect(res => {
						_this.isConnect = false;
						console.log("onDisconnect", res);
						setTimeout(() => {
							_this.isConnect = false;
							_this.connectToServer(_this.config);
							console.log("connectToServer 重连")
						}, 3000);
					});

				} catch (error) {

				}
			},
			init() {
				let src = uni.getStorageSync('mui_video_src') || '../../static/flv/xgplayer-demo-720p.flv';
				this.mui_video = new MuiPlayer({
					container: '#mui-video',
					title: 'home_video',
					// 设置个默认地址 否则会弹出视频为空
					src: src,
					autoplay: true,
					autoFit: true,
					loop: true,
					muted: false,
					live: true,
					objectFit: "full",
					initFullFixed: true,
					poster: "",
					height: '100%',
					parse: {
						type: 'flv',
						loader: Flv,
						config: {
							debug: false,
						},
					}
				})
				/* 移除右上角的箭头 */
				for (var i = 0; i < document.getElementsByClassName("mplayer-header").length; i++) {
					document.getElementsByClassName("mplayer-header")[i].remove()
				}
				for (var i = 0; i < document.getElementsByClassName("mplayer-footer").length; i++) {
					document.getElementsByClassName("mplayer-footer")[i].remove()
				}
			},
		}
	}
</script>

<style>
		#mui-video {
			width: 100%;
			height: calc(100%) !important;
		}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
	}
	#videoMain{
		position: absolute;
		z-index: 1;
	}
	
	.cover-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: yellow;
		}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>